<template>
  <div class="container">
    <data-view
      propViewKey="device_circulate_settings"
      propViewForm="device/device_circulate/settings/detail.vue"
      :propIsTdesign="true"
      :propsDisableDbClick="true"
      @extra-button-click="extraButtonClick"
      :propAutoFetchData="false"
      ref="dtl"
      :propViewFormTitle="cpPropViewFormTitle"
      :propParam="{setType: propSetType}"
      :propHideColumns="cpPropHideColumns"
    />

    <customDrawer title="更改设置" ref="customDrawerSet" :widthPx="500" :heightPx="250" @confirm="customDrawerSetConfirm" :autoHide="false">
      <template #content>
        <customForm :data="form" :rules="rules" ref="editForm">
          <template #content>
            <customFormItem label="租赁分类"name="circulateClassify" :parent="_self" :form="form"
                            :type="constCommon.formItemType.selectDict.name"
                            :config="{dictType: constCommon.dictType.deviceCirculateClassify}"
                            fullWidth
            />

            <customFormItem label="结算方式"name="costClassify" :parent="_self" :form="form"
                            :type="constCommon.formItemType.selectDict.name"
                            :config="{dictType: constCommon.dictType.deviceCirculateCostClassify}"
                            fullWidth
            />

            <customFormItem label="单次费用(元)" name="costPrice" :parent="_self" :form="form"
                            :type="constCommon.formItemType.inputNumber.name"
                            help="根据结算方式来，每天费用、每日费用、每小时费用"
                            fullWidth
            />

          </template>
        </customForm>
      </template>
    </customDrawer>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  desc: '设备设置-列表',
  props: ['propSetType'],
  data() {
    return {
      rules: {
        circulateClassify: [{ required: true, message: '请选择', trigger: 'blur' }],
        costClassify: [{ required: true, message: '请选择', trigger: 'blur' }],
        costPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      form: {

      }
    }
  },
  components: {
    customAnchor
  },
  mounted() {
    this.loadDtl()
  },
  computed: {
    cpPropViewFormTitle() {
      return this.utils.getDictLabel(this.propSetType, this.constCommon.dictType.deviceSetType, null, false) + '设置'
    },
    // 隐藏列
    cpPropHideColumns() {
      if (this.propSetType != this.constCommon.deviceSetType.share) {
        return ['circulateClassify', 'costClassify', 'costPrice', 'flagCirculate', 'accuQuantity', 'accuAmount', 'borrowDeptName', 'borrowTime', 'expectTime']
      }
      return []
    }
  },

  methods: {
    // 加载明细
    loadDtl() {
      let queryWrapper = this.$newWrapper()
      queryWrapper.eq('setType', this.propSetType)
      this.$refs.dtl.setQueryWrapper(queryWrapper)
    },
    // 扩展按钮
    extraButtonClick(para) {
      let buttonKey = para.button.key
      if (buttonKey === 'set') { // 更改设置
        this.form = JSON.parse(JSON.stringify(para.data))
        this.$refs.customDrawerSet.show()
        return
      }
    },
    // 更改设置
    customDrawerSetConfirm() {
      let that = this
      this.$refs.editForm.validate().then((result) => {
        if (result && result == true) {
          this.utilMessage.confirm('是否更改该设备的共享设置', () => {
            this.utilVue.loadShow(true)
            this.$ajax.post('/device/circulate_settings/save', that.form).then(resp => {
              this.utilVue.loadHide()
              if (resp.code == 0) {
                this.$refs.customDrawerSet.hide()
                this.utilMessage.success(resp.msg)
                this.loadDtl()
              }
            })
          })
        }
      })
    }
  }
}
</script>
